<template>
	<div>
		<header class="my-task-content-header">
			<div
				id="my-task-tab"
				class="my-task-content-header-left"
				:style="{
					'max-width': active === 'toDo?' ? 'calc(100% - 70px)' : '100%',
				}"
			>
				<div
					class="start-mask"
					:style="{ opacity: showStartMask ? '1' : '0' }"
				></div>
				<ul class="tab-list">
					<li
						v-for="item in tabs"
						@click="changeTabs(item)"
						:class="{
							'active-tab': item.children
								? item.id.includes(active)
								: item.id === active,
						}"
					>
						{{ item.name
						}}<span v-if="item.id !== 'hasDone' && item.count !== 0"
							>({{ item.count > 99 ? '99+' : item.count }})</span
						>
					</li>
				</ul>
				<div
					class="end-mask"
					:style="{
						opacity: showEndMask && active !== 'toDo' ? '1' : '0',
					}"
				></div>
			</div>
			<div class="my-task-content-header-right" v-if="active === 'toDo'">
				<div
					class="end-mask"
					:style="{
						opacity: showEndMask ? '1' : '0',
					}"
				></div>
				<div
					class="cancel-batch"
					@click="emits('bathApproval', false)"
					v-if="showApprovalFooter"
				>
					<i class="low-code iconadd"></i
					><span>{{ $t('common.cancel', '取消批量') }}</span>
				</div>
				<div v-else>
					<i class="low-code iconpiliangshenpi a1" @click="openBathApproval" />
					<i
						class="low-code iconyidongduan-shaixuan"
						:class="{
							check: conditionIsShow,
							'has-content': !conditionIsShow && hasContent,
						}"
						@click="changeConditionState"
					/>
				</div>
			</div>
		</header>
		<header class="sceond-tabs">
			<div
				class="start-mask"
				:style="{ opacity: showSecondStartMask ? '1' : '0' }"
			></div>
			<ul id="second-tab" class="list">
				<template v-for="item in (secondTabs as any)">
					<li
						v-if="
							item.id == 'myToDo' ||
							(item.id == 'agentTodo' && item.count !== 0) ||
							item.id !== 'agentTodo'
						"
						@click="changeTabs(item)"
						:class="{ 'active-tab': item.id === active }"
					>
						{{ item.name }}
						<span
							v-if="
								item.id == 'myToDo' ||
								(item.id == 'agentTodo' && item.count !== 0)
							"
						>
							({{ item.count > 99 ? '99+' : item.count }})
						</span>
					</li>
				</template>
			</ul>
			<div class="sceond-tabs-right">
				<div
					class="end-mask"
					:style="{
						opacity: showSecondEndMask ? '1' : '0',
					}"
				></div>
				<div
					class="cancel-batch"
					@click="emits('bathApproval', false)"
					v-if="showApprovalFooter"
				>
					<i class="low-code iconadd"></i
					><span>{{ $t('common.cancel', '取消批量') }}</span>
				</div>
				<div v-else>
					<i
						v-if="active == 'myToDo'"
						class="low-code iconpiliangshenpi a2"
						@click="openBathApproval"
					/>
					<i
						class="low-code iconyidongduan-qingchu"
						@click="clearKnow"
						v-if="active === 'noRead'"
					/>
					<i
						class="low-code iconyidongduan-shaixuan"
						:class="{
							check: conditionIsShow,
							'has-content': !conditionIsShow && hasContent,
							'active-shiaxuan': active === 'agentTodo',
						}"
						@click="changeConditionState"
					/>
				</div>
			</div>
		</header>
	</div>
</template>
<script setup lang="ts">
import { apiInit } from '@/services'
import { ref, watch, computed, onMounted } from 'vue'
import { tabs } from './tabs'
import { showFailToast, showSuccessToast, showConfirmDialog } from 'vant'
// import { t } from '@/entry_mobile/locales'
import { i18n } from '@/locales'
const { $t } = i18n
const api = apiInit()
const props = defineProps([
	'tabsCount',
	'active',
	'conditionIsShow',
	'showApprovalFooter',
	'listCountByType',
	'checked',
	'sortChecked',
	'approvalChecked',
	'todoTabListTotal',
])
const emits = defineEmits([
	'changeMyTaskActive',
	'showCondition',
	'reset',
	'init',
	'bathApproval',
])
const secondTabs: any = ref([])
const noReadNum = ref(0)
const showStartMask = ref(false)
const showEndMask = ref(false)
const showSecondStartMask = ref(false)
const showSecondEndMask = ref(false)
const hasContent = computed(
	() =>
		(props.listCountByType?.length !== props.checked?.length &&
			props.listCountByType?.length !== 0) ||
		props.sortChecked !== 'desc' ||
		props.approvalChecked !== ''
)
onMounted(() => {
	let tab: any = document.getElementById('my-task-tab')
	setTimeout(() => {
		showStartMask.value = tab.scrollLeft > 5
		showEndMask.value = tab.scrollWidth - tab.scrollLeft - tab.clientWidth > 2
	}, 800)
	tab.addEventListener('scroll', () => {
		showStartMask.value = tab.scrollLeft > 5
		showEndMask.value = tab.scrollWidth - tab.scrollLeft - tab.clientWidth > 2
	})
	secondTabs.value = tabs[0].children
	emits('changeMyTaskActive', tabs[0].children[0].id)
})
const openBathApproval = () => {
	emits('bathApproval', true)
	emits('showCondition', false)
}
let tabsId = ref()
const changeTabs = (tab: any) => {
	tabsId.value = tab.id
	setTimeout(() => {
		let secondTab: any = document.getElementById('second-tab')
		if (secondTab) {
			showSecondStartMask.value = secondTab.scrollLeft > 5
			showSecondEndMask.value =
				secondTab.scrollWidth - secondTab.scrollLeft - secondTab.clientWidth > 2
			secondTab.addEventListener('scroll', () => {
				showSecondStartMask.value = secondTab.scrollLeft > 5
				showSecondEndMask.value =
					secondTab.scrollWidth - secondTab.scrollLeft - secondTab.clientWidth >
					2
			})
		}
	}, 800)

	if (Array.isArray(tab.id)) {
		secondTabs.value = tab.children || []
	}
	if (tab.children ? tab.id[0] : tab.id === 'noRead' || tab.id === 'noRead') {
		noReadNum.value = tab.count
	}
	emits('changeMyTaskActive', tab.children ? tab.id[0] : tab.id)
	emits('showCondition', false)
	emits('reset')
}
const changeConditionState = () => {
	if (props.conditionIsShow) {
		emits('init')
		emits('reset')
	}
	emits('bathApproval', false)
	emits('showCondition', !props.conditionIsShow)
}
const clearKnow = () => {
	if (noReadNum.value) {
		showConfirmDialog({
			className: 'all-read',
			title: $t('pages.task.PleaseConfirm', '请确认') ,
			message: `${$t('pages.task.ConfirmThat', '确认将')} ${noReadNum.value} ${
				$t('pages.task.NotificationsAsRead', '条知会标记为已读')
			}？`,
			confirmButtonText: $t('pages.task.Confirm', '确认'),
			cancelButtonText: $t('common.cancel', '取消'),
		})
			.then(async () => {
				let { code, data } = await api.default.ReadAllNoticeTaskPrivateV2POST({
					payload: {},
				})
				if (code === '000000') {
					showSuccessToast(
						`${$t('pages.task.ApprovalSucceeded', '成功将') } ${noReadNum.value} ${
							$t('pages.task.data', '条知会标记为已读')
						}`
					)
					noReadNum.value = 0
				} else {
					showFailToast($t('pages.task.Error', '接口接口出错了') )
				}
				emits('init')
			})
			.catch(() => {
				// on cancel
			})
	}
}
watch(
	() => props.tabsCount,
	() => {
		;[tabs[0].count, tabs[2].count, (tabs[2] as any).children[0].count] = [
			props.tabsCount.todo_task_count,
			props.tabsCount.un_read_notice_count,
			props.tabsCount.un_read_notice_count,
		]
		for (let i = 0; i < secondTabs.value.length; i++) {
			tabsId.value = tabsId.value ? tabsId.value : tabs[0].children[0].id
			if (
				tabsId.value === secondTabs.value[i].id &&
				tabsId.value === 'myToDo'
			) {
				tabs[0].children[0].count = props.todoTabListTotal
				sessionStorage.setItem(
					'myToDoCount',
					JSON.stringify(tabs[0].children[0].count)
				)
				tabs[0].children[1].count =
					Number(JSON.stringify(tabs[0].children[1].count)) ||
					props.tabsCount.agent_todo_task_count
			} else if (
				tabsId.value === secondTabs.value[i].id &&
				tabsId.value === 'agentTodo'
			) {
				tabs[0].children[1].count = props.todoTabListTotal
				sessionStorage.setItem(
					'agentTodoCount',
					JSON.stringify(tabs[0].children[1].count)
				)
				tabs[0].children[0].count = sessionStorage.getItem('myToDoCount')
					? Number(JSON.parse(sessionStorage.getItem('myToDoCount') || ''))
					: props.tabsCount.todo_task_count
			}
		}
	},
	{
		deep: true,
	}
)
</script>
<style lang="less" scoped>
.my-task-content-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
	background-color: #fff;
	padding: 0 16px;
	padding-bottom: 2px;
	position: relative;
	z-index: 9;
	&-left {
		height: 100%;
		overflow: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
		.start-mask {
			pointer-events: none;
			position: absolute;
			z-index: 9;
			left: 10px;
			top: 0;
			width: 44px;
			height: 43px;
			background: linear-gradient(
				90deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 87.5%
			);
			transform: rotate(-180deg);
			transition: opacity 0.3s ease;
			opacity: 0;
		}
		.end-mask {
			pointer-events: none;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: absolute;
			z-index: 9;
			top: -3px;
			right: 10px;
			width: 44px;
			height: 43px;
			background: linear-gradient(
				90deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 87.5%
			);
			transition: opacity 0.3s ease;
			opacity: 1;
		}
		.tab-list {
			display: flex;
			height: 100%;
			li {
				height: 100%;
				display: inline-block;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 16px;
				display: inline-flex;
				align-items: center;
				text-align: center;
				color: #1f2329;
				margin-right: 20px;
				position: relative;
				white-space: nowrap;
			}
			li:last-child {
				margin-right: 0;
			}
			.active-tab {
				font-weight: 600;
				color: @rok-mobile-primary-color;
				&::after {
					content: '';
					display: block;
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					bottom: 5px;
					width: 32px;
					height: 4px;
					background: @rok-mobile-primary-color;
					border-radius: 20px;
				}
			}
		}
	}
	&-right {
		display: flex;
		align-items: center;
		margin-left: 5px;
		position: relative;
		.end-mask {
			pointer-events: none;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: absolute;
			z-index: 9;
			top: -3px;
			left: -42px;
			width: 44px;
			height: 43px;
			background: linear-gradient(
				90deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 87.5%
			);
			transition: opacity 0.3s ease;
			opacity: 1;
		}
		i {
			font-size: 20px;
			margin: 0 7px;
			color: #8f959e;
		}
		.cancel-batch {
			display: flex;
			align-items: center;
			i {
				font-size: 20px;
				transform: rotateZ(45deg);
				color: @rok-mobile-primary-color;
				margin: 0;
			}
			span {
				max-width: 100px;
				white-space: nowrap;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				text-align: right;
				font-size: 14px;
				line-height: 0;
				margin-left: 3px;
				color: @rok-mobile-primary-color;
			}
		}
		.check {
			color: @rok-mobile-primary-color;
		}
		.has-content {
			color: @rok-mobile-primary-color;
			opacity: 0.8;
		}
	}
}
.sceond-tabs {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	background-color: #fff;
	padding: 8px 16px;
	z-index: 9;
	border-top: 1px solid #e8eaed;
	.start-mask {
		pointer-events: none;
		position: absolute;
		z-index: 9;
		left: 10px;
		top: 0;
		width: 44px;
		height: 43px;
		background: linear-gradient(
			90deg,
			rgba(255, 255, 255, 0) 0%,
			#ffffff 87.5%
		);
		transform: rotate(-180deg);
		transition: opacity 0.3s ease;
		opacity: 0;
	}
	.list {
		overflow-x: scroll;
		max-width: calc(100% - 30px);
		white-space: nowrap;
		&::-webkit-scrollbar {
			display: none;
		}
		li {
			display: inline-block;
			margin-right: 5px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			color: #646a73;
			padding: 1px 10px;
			// transition: all 0.3s ease-out;
		}
		.active-tab {
			font-weight: 600;
			background: @rok-mobile-background-color;
			border-radius: 20px;
			color: @rok-mobile-primary-color;
			padding: 1px 10px;
		}
	}
	&-right {
		display: flex;
		align-items: center;
		position: relative;
		.end-mask {
			pointer-events: none;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: absolute;
			z-index: 9;
			top: -3px;
			left: -42px;
			width: 44px;
			height: 43px;
			background: linear-gradient(
				90deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 87.5%
			);
			transition: opacity 0.3s ease;
			opacity: 1;
		}
		.cancel-batch {
			display: flex;
			align-items: center;
			i {
				font-size: 20px;
				transform: rotateZ(45deg);
				color: @rok-mobile-primary-color;
				margin: 0;
			}
			span {
				max-width: 100px;
				white-space: nowrap;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				text-align: right;
				font-size: 14px;
				line-height: 0;
				margin-left: 3px;
				color: @rok-mobile-primary-color;
			}
		}
		i {
			font-size: 20px;
			margin: 0 7px;
			color: #8f959e;
		}
		.check {
			color: @rok-mobile-primary-color;
		}
		.has-content {
			color: @rok-mobile-primary-color;
			opacity: 0.8;
		}
		.active-shiaxuan {
			color: @rok-mobile-primary-color;
		}
	}
}
</style>
<style lang="less">
.all-read.van-popup.van-popup--center.van-dialog {
	max-width: 100%;
}
</style>
